<template>
	<!-- 充币通道 -->
	<view class="passageway-container view-bg">
		<nav-bar :title="i18n.charge.charge" @_back="_back" rightIcon="plan" @rightClick="rightClick" />
		<view class="passageway-box">
			<view class="title">
				<text>{{title}}</text>
			</view>
			<view class="passageway-list" v-for="item in passagewayList" :key="item.id" @click="jump(item.id)">
				<image class="passageway-image" :src="'../../static/images/ui/' + item.icon + '.png'" mode="widthFix"></image>
				<text>{{item.name}}</text>
				<u-icon name="arrow-right" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
			</view>
			<!-- 银行通道 -->
			<view class="bank-passageway list-bg">
				<view v-for="item in bankList" :key="item.id" @click="awayClick(item)">
					<image class="passageway-bank-image" :src="'../../static/images/ui/' + item.icon + '.png'" mode="widthFix"></image>
					<text>{{item.name}}</text>
					<u-icon name="arrow-right" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				passagewayList: [{
						name: 'USDT',
						icon: 'usdt',
						id: 0
					},
					{
						name: 'BTC',
						icon: 'btc',
						id: 1
					},
					{
						name: 'ETH',
						icon: 'eth',
						id: 2
					},
				]
			}
		},
		mounted() {
			this.loadList()
		},
		computed: {
			...mapGetters(['currencyList']),
			i18n() {
				return this.$t('message');
			},
			title() {
				return this.$t('message').charge.recharge;
			},
			bankList() {
				return [
					{
							name: this.$t('message').charge.counter,
							icon: 'counter',
							id: 0,
							url: '/pages/set/service'
						},
						{
							name: this.$t('message').charge.binance,
							icon: 'binance',
							id: 1,
							url: 'http://wfzj.net/'
						},
						{
							name: this.$t('message').charge.zb,
							icon: 'zb',
							id: 2,
							url: 'https://www.hqz.com/exchange/zb/'
						},
						{
							name: this.$t('message').charge.coincola,
							icon: 'coincola',
							id: 3,
							url: 'https://www.coincola.info/'
						},
						{
							name: this.$t('message').charge.okex,
							icon: 'okex',
							id: 4,
							url: 'http://www.v6dp.net/'
						},
				]
			}
		},
		methods: {
			_back() {
				uni.navigateBack();
			},
			jump(id) {
				uni.navigateTo({
					url: '/pages/index/chargeMoney?id=' + id
				})
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/index/chargeList'
				})
			},
			loadList() {
				let arry = []
				for (let i in this.passagewayList) {
					for (let o in this.currencyList) {
						if (this.passagewayList[i].name === this.currencyList[o].title) {
							let obj = {
								icon: this.passagewayList[i].icon,
								name: this.passagewayList[i].name,
								id: this.currencyList[o].id,
							}
							arry.push(obj)
						}
					}
				}
				this.passagewayList = arry;
			},
			awayClick(item) {
				if (!item.id) return uni.navigateTo({url: item.url});
				let oA = document.createElement("a");
				oA.href = item.url;
				oA.target = '_blank';
				oA.click();
				document.body.appendChild(oA);
				oA.remove(); // 下载之后把创建的元素删除 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.passageway-container {
		.passageway-box {
			margin: 0 30rpx;

			.title {
				margin: 60rpx 0 30rpx;
				font-size: 30rpx;
				color: #fff;
			}

			.passageway-list {
				display: flex;
				align-items: center;
				height: 98rpx;
				border: 1px solid #eec67f;
				border-radius: 16rpx;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				background-color: #353c58;

				.passageway-image {
					width: 60rpx;
				}

				&>text {
					display: inline-block;
					width: calc(100% - 102rpx);
					margin-left: 30rpx;
				}
			}
		}

		.bank-passageway {
			padding: 0 30rpx;
			border-radius: 16rpx;
			margin-top: 80rpx;

			&>view {
				display: flex;
				height: 120rpx;
				align-items: center;
				border-bottom: 1px solid rgba(255, 255, 255, .1);
				font-size: 28rpx;
				color: #fff;
				&:last-child {
					border-bottom: 0;
				}
				.passageway-bank-image {
					width: 60rpx;
				}
				&>text {
					display: inline-block;
					width: calc(100% - 102rpx);
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
